import React, {useState,} from 'react'
import './FormInput.css'

const FormInput = (props) => {
    const {
        type,
        value,
        onChange,
        placeholder,
        readOnly,
        onPress
    } = props

    const [inputFocus, setInputFocus,] = useState(false)

    const template = (
        <div
            className={inputFocus? 'custom-input custom-input-touched' : 'custom-input'}
            // style={{...props.extraStyle,}}
            style={{...props.extraStyle,}}

        >
            <input
                type={type}
                placeholder={placeholder}
                value={value}
                onChange={onChange}
                onFocus={e => setInputFocus(true)}
                onBlur={e => setInputFocus(false)}
                readOnly={readOnly}
                onClick={e => onPress && onPress(e)}
                style={{...props.extraInputStyle,}}
            />
        </div>
    )

    return template
}

export default FormInput
